<template>
 <view class="detail">
	 <view class="detail-top">
	 	  <view class="detail-top-left">
	 			<view class="detail-top-no">
	 				合约编号：{{receipt.debtnum}}
	 			</view>
	 			<view class="detail-top-label">合约总额(元)</view>
	 			<view class="detail-top-num">
	 				{{receipt.loan_money}}
	 			</view>
	 	  </view>
	 	  <view class="detial-top-right">
	 	  		<view class="detail-top-btn">{{receipt.repay_status}}</view>
	 	  </view>
	 </view>
	 
	 <view class="detail-card">
	 	<view class="detail-card-top">
	 			<image src="../../../static/images2/bg-zdt.png" mode="" class="img"></image>
	 			<view class="detail-card-top__inner">
	 				<view class="detail-card-top-title">合约详情</view>
	 				<view class="detail-card-top-no">{{receipt.debtnum}}</view>
	 			</view>
	 	</view>
	 	<view class="detail-card-main">
	 		<view class="detail-card-line">
	 			由于<view class="bold">{{receipt.loanpurpose}}</view>，本人通过<view class="bold">{{receipt.zztype}}</view>方式
	 			向<view class="bold">{{receipt.creditor.username}}</view>(身份证号码:<view class="bold">{{receipt.creditor.idcard}}</view>)借取本金
	 			人民币<view class="bold">{{num2chinese(receipt.loan_money)}}(￥{{receipt.loan_money}})</view>，
	 			总利息金额<view class="bold">壹元(1.00)</view>
	 			即借款年利率<view class="bold">{{receipt.year_rate}}%</view>,自<view class="bold">{{receipt.loan_date}}出借</view>，需在
	 			<view class="bold">{{receipt.repay_date}}一次性还本付息</view>。
	 		</view>
	 		<view class="detail-card-line">
	 			本借条自「<view class="bold">出借人</view>」向「<view class="bold">借款人</view>」支付借款本金时
	 			生效。本借条纠纷由出借人所在地、债务人所在地地方人民法院管辖。
	 		</view>
	 	</view>
	 </view>
	 
	 <view class="detail-block">
	 	<view class="detail-block-title">
	 		借款人信息
	 	</view>
	 	<view class="detail-block-main">
	 		<view class="line-item">
	 			<view class="line-item-label">姓名</view>
	 			<view class="line-item-value">{{receipt.obligor.username}}</view>
	 		</view>
	 		<view class="line-item">
	 			<view class="line-item-label">手机号</view>
	 			<view class="line-item-value">{{receipt.obligor.mobile}}</view>
	 		</view>
	 		<view class="line-item">
	 			<view class="line-item-label">身份证号</view>
	 			<view class="line-item-value">{{receipt.obligor.idcard}}</view>
	 		</view>
	 	</view>
	 </view>	 
	 
	 <view class="detail-block">
	 	<view class="detail-block-title">
	 		出借人信息
	 	</view>
	 	<view class="detail-block-main">
	 		<view class="line-item">
	 			<view class="line-item-label">姓名</view>
	 			<view class="line-item-value">{{receipt.creditor.username}}</view>
	 		</view>
	 		<view class="line-item">
	 			<view class="line-item-label">手机号</view>
	 			<view class="line-item-value">{{receipt.creditor.mobile}}</view>
	 		</view>
	 		<view class="line-item">
	 			<view class="line-item-label">身份证号</view>
	 			<view class="line-item-value"></view>
	 		</view>
	 	</view>
	 </view>
	 
	 <view class="detail-block">
	 		  <view class="detail-block-title">付款信息</view>
	 		  <view class="detail-block-main">
	 			  <view class="line-item">
	 					<view class="line-item-label">近期还款时间</view>
	 					<view class="line-item-value">{{receipt.repay_date}}</view>
	 			  </view>
	 			  <view class="line-item">
	 					<view class="line-item-label">借款周期</view>
	 					<view class="line-item-value">{{receipt.loan_date}}到{{receipt.repay_date}}</view>
	 			  </view>
	 			  <view class="line-item">
	 					<view class="line-item-label">还款方式</view>
	 					<view class="line-item-value">{{receipt.repay_type}}</view>
	 			  </view>
	 			  <view class="line-item" v-if="receipt.repay_type!='一次性还款'">
	 					<view class="line-item-label">付款周期</view>
	 					<view class="line-item-value">
	 						每期还款{{ receipt.cycle_money }}元，共{{
	 									receipt.cycle_num
	 						}}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view>
	 					</view>
	 			  </view>
	 			  <view class="line-item">
	 					<view class="line-item-label">年化利率</view>
	 					<view class="line-item-value">{{receipt.year_rate}}%</view>
	 			  </view>
	 		  </view>
	 </view>
	 
	 <view class="detail-block">
	 		<view class="detail-block-title">其他事项</view>
	 		<view class="detail-block-main submitter">
	 			<view  v-if="receipt.remarks">{{receipt.remarks}}</view>
	 			<view class="remarks" v-else>借款事项备注</view>
	 		</view>
	 </view>
	 
	 <view class="debtDetails">
	   <!-- <view class="top">
	     <image src="../../../static/images/loginLogo.png" mode="" class="img"></image>
	     <view>
	       <view class="username">{{ receipt.obligor.username }}</view>
	       <view class="mobile">{{ receipt.obligor.mobile }}</view>
	     </view>
	   </view>
	   <view class="essential">基本信息</view>
	   <view class="item">
	     <view>合约总额：{{ receipt.loan_money }}￥</view>
	   </view>
	   <view class="item">
	     <view>状态：{{ receipt.repay_status }}</view>
	   </view>
	   <view class="essential">付款信息</view>
	   <view class="item">
	 	 <view >近期还款时间：{{receipt.repay_date}}</view>	
	 	</view>
	   <view class="item" v-if="receipt.repay_type == '一次性还款'">
	     <view>借款周期：{{ receipt.loan_date }}到{{ receipt.repay_date }}</view>
	   </view>
	   <view class="item">
	     <view>还款方式：{{ receipt.repay_type }}</view>
	   </view>
	   <view class="item" v-if="receipt.repay_type != '一次性还款'">
	     <view 
	       >付款周期：每期还款{{ receipt.cycle_money }}元，共{{
	         receipt.cycle_num
	       }}期 <view v-if="receipt.repay_type != '灵活分期'">，还款日每月{{ receipt.date }}日</view></view
	     >
	   </view>
	   <view class="item">
	     <view>年化利率：{{ receipt.year_rate }}%</view>
	   </view>
	   <view class="essential">其它事项</view>
	   <view class="submitter">
	     <view v-if="receipt.remarks">{{ receipt.remarks }}</view>
	     <view class="remarks" v-else>借款事项备注</view>
	   </view> -->
	
	   <u-popup
	     v-model="rejectshow.show"
	     mode="center"
	     border-radius="20"
	     width="686rpx"
	     height="392rpx"
	   >
	     <view class="rebut">
	 		  <view class="tips">提示</view>
	 		  <view class=" identification">是否确认驳回该待确认的合约？</view>
	 		     <view class="repayment_button">
	         <view class="cancel public" @click="cancel">取消</view>
	         <view class="confirm public" @click="acknowledge">确认</view>
	       </view>
	 	  </view>
	   </u-popup>
	 </view>
	 <view class="d-f verifica_bottom"
	   >
	 	 	   <view class="reject" @click="overrule"> 驳回 </view>
	 	 	  <view class="verification" @click="verification">
	    确定
	   </view>
	  
	 </view>
	  <jpPwd ref="jpPwds" tite="身份验证" contents="请输入交易密码,以验证身份" @inputPwd="inputPwd" :flag="flag"  @completed="completed" ></jpPwd>
 </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
 import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
 import toast from '../../../utils/toast'
 import date from '@/utils/date'
export default {
  data() {
    return {
		flag:false,
	};
  },
  components: {jpPwd},
  methods: {
	  num2chinese: date.num2chinese,
    ...mapActions({
		confirm:'MAY_DEBT/CONFIRM',//确认交易密码	
      getNoteDetails: "MAY_DEBT/GET_NOTE_DETAILS", //获取合约详情
	  rejectDebit: "MAY_DEBT/REJECT_DEBIT", //驳回合约
    }),
    ...mapMutations({
      changeRejectshow: "MAY_DEBT/CHANGE_REJECT_SHOW", //更改驳回弹框状态
    }),
    //输入交易密码验证合约
    verification() {
		this.$refs.jpPwds.toOpen()
		this.flag=false
    },
    //打开驳回弹框
    overrule() {
      this.changeRejectshow(true);
    },
	cancel(){
		this.changeRejectshow(false);
	},
	//驳回合约
	acknowledge(){
     this.rejectDebit(this.id)
	},
	completed(e){
		this.confirm({id:this.id,pay_pwd:e}).then(res=>{
			if(res){
				toast.successTab('确认合约成功', '/pages/loanee/mayDebt/index')
			}else{
				this.flag=true
				this.$refs.jpPwds.backs()
			}
		})	
	},
	inputPwd(){
		this.flag=false	
	}
  },
  mounted() {
    this.changeRejectshow(false);
  },
  onShow(){
this.changeRejectshow(false);
  },
  watch: {},
  onLoad(options) {
    this.id = options.id;
    this.getNoteDetails(options.id);
  },
  computed: {
    ...mapState({
      receipt: (state) => state.MAY_DEBT.receipt,
      repay_record: (state) => state.MAY_DEBT.repay_record,
      rejectshow: (state) => state.MAY_DEBT.rejectshow,
    }),
  },
};
</script>

<style scoped lang='scss'>
@import "@/common/receiptDetails.scss";
</style>
<style>
page {
  background: #fafafa;
}
</style>